<template>
    <div class="header">
        <div class="header-wrap">

            <!-- 左侧内容 -->
            <div class="header-left-wrap">
                <a :href="homePageUrl">
                    <div class="header-left">
                        <img class="img1" src="@/assets/image/header/smileface1.png">
                        <img class="img2" src="@/assets/image/header/smileface2.png">
                        <span>欢迎访问我们的生活记录</span>
                    </div>
                </a>
            </div>
            
            

            <!-- 右侧内容 -->
            <div class="header-right">
                <el-dropdown :show-timeout="showTimeOut">
                    <span class="el-dropdown-link">
                        <i class="el-icon-user"></i>
                        <span class="header-right-username">{{userName}}</span>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人主页</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item divided>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </div> 
    </div>
</template>

<script>
export default {
    name:'home-header',
    data(){
        return{
            homePageUrl:process.env.BASE_URL+'home', //通过变量获取使用url访问前缀。
            userName:'admin', //todo 用户信息要在登陆时候存入vuex，然后在这里获取。
            showTimeOut:0 //设置下拉菜单显示的延迟时间，必须要怎么设置，否则组件会报错。
        }
    },
    methods:{
        
    },
    mounted(){
        //todo
        //组建加载时，从vuex里获取userName等用户信息。
    }
}
</script>

<style scoped>
.header{
    /*开启相对定位，目的是让里面的子元素可以调整位置布局*/
    position: relative;

    /*撑开整个空间 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    /*设置最小宽度，与里面的子容器宽度一致，这样可以避免浏览器横向压缩后拖动滚动条，出现该元素宽度和里面的子元素宽度不一致问题。 */
    min-width: 1000px;

    background-color: rgba(41, 128, 185, 0.8);
}
.header-wrap{
    height: 100%;
    width: 1000px; /*注意，这里的宽度要和父元素的min-width一致 */

    /*在它在父元素里水平居中 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* 
    也可以这样水平居中
    position: relative;
    margin: 0 auto; 
    */
}


/* ===================== 左边部分 =============================*/

.header-left-wrap{
    /*左部容器，让它在父容器里紧靠左侧，并且垂直居中 */
    position: absolute;
    left: 0;
    top:50%;
    transform: translateY(-50%);
}

.header-left{
    /*开启弹性布局，让它里面的子元素水平排布 */
    display: flex;
}

.header-left img{
    /*设置图片宽度(img标签会保持图片比例，这是个正方形，所以宽、高会同时被设置为同样的值)
        同时，这个图片会撑开父元素的高度，即设置了父元素的高度
     */
    width: 40px;
}

.header-left span{
    /*设置行高(line-height)和父元素的高(height)一致，达到文字垂直居中的效果。
        注意：由于父元素的高度是由图片决定的，所以这个值设置为和图片的高度一致即可。
     */
    line-height: 40px;

    color: white;
    font-size: 18px;
    font-weight: 500;

    margin-left: 6px;
}

/*两个图片切换的效果 */
.header-left .img2{
    display: none;
}
.header-left:hover .img2{
    display: inline-block;
}
.header-left:hover .img1{
    display: none;
}


/* ===================== 右边部分 =============================*/
.header-right{
    /*右部容器，让它在父容器中紧靠右侧，并且垂直居中 */
    position: absolute;
    right: 0;
    top:50%;
    transform: translateY(-50%);
}

.header-right .el-icon-user{
    font-size: 28px;
    color: white;
}

.header-right .header-right-username{
    margin-left: 6px;
    color:white;
}

.header-right:hover i,.header-right:hover span{
    color: #ffa502;
}

</style>